重庆网站建设有限公司,WordPress的index,广州市网站网页制作公司,优秀的个人网站在前端开发中#xff0c;一般情况下都使用 npm 和 webpack。 npm是一个非常流行的包管理工具#xff0c;帮助开发者管理项目中使用的依赖库和工具。它可以方便地为项目安装第三方库#xff0c;并在项目开发过程中进行版本控制。 webpack是一个模块打包工具#xff… 在前端开发中一般情况下都使用 npm 和 webpack。 npm是一个非常流行的包管理工具帮助开发者管理项目中使用的依赖库和工具。它可以方便地为项目安装第三方库并在项目开发过程中进行版本控制。 webpack是一个模块打包工具它可以帮助我们将项目中的代码例如 JavaScript、CSS、图片等资源进行打包和优化从而提高应用程序的加载速度和性能。 在项目的开发过程中我们通常首先使用npm创建项目并在项目中安装所需的依赖然后使用webpack将项目的代码进行打包并在发布前进行最终的代码优化。 webpack官网地址
一、使用npm和webpack进行项目开发的具体构建过程
以Vue 2 的组件化开发为例 1、安装 Node.js Vue2 是一个基于 Node.js 环境的前端框架需要安装 Node.js 环境。安装Node.js即安装了npm。 2、创建项目文件夹
npm init -y 生成package.js。 3、安装 Webpack和webpage-cli 在项目目录下使用 npm 安装 Webpack命令为
npm install webpack webpack-cli --save-dev 4、配置 Webpack 在项目目录下创建 webpack.config.js 文件进行Webpack的配置。 一般简易的配置为如入口、出口、loader等。
const pathrequire(path)
const { VueLoaderPlugin } require(vue-loader)module.exports{mode:development,entry:./src/main.js,output:{filename:bundle.js,path:path.resolve(__dirname,dist)},module:{rules:[{test:/\.vue$/,loader:vue-loader},{test:/\.(jpg|jpeg|png|svg)$/,loader:file-loader,options:{name:[name].[ext],}},{test:/\.css$/,use:[style-loader,css-loader]}]},resolve:{alias:{vue:vue/dist/vue.esm-bundler.js}}
} 5、安装Vue2及项目依赖 使用npm在当前目录下安装生产环境下依赖的包。 6、编写项目Vue2组件 在 VSCode 中编写 Vue2 组件使用 Webpack 进行打包。 ⑴创建项目入口文件在其中定义项目的根组件
import Vue from vue
import App from ./App.vue
new Vue({el: #app,render: h h(App)
})⑵创建一个名为 App.vue 的组件文件在其中定义根组件的模板和样式
templatedivpHello World!/p/div
/templatestylep {font-size: 20px;color: blue;}
/style7、运行项目 在终端中运行
npx webpack 即可打包项目生成 dist 目录。 8、部署项目 使用 Web 服务器部署生成的 dist 目录并进行访问。
二、webpack的知识要点 1、Entry指示webpack以哪个文件为入口起点开始打包。 2、Output指示webpack打包后的资源bundles输出位置以及命名。 3、LoaderLoader让webpack能够去处理CSS、img图片等非JavaScript文件webpack本身只能处理Javascript/Json 4、Plugins可以执行非内置的包括打包优化、压缩、定义环境中的变量等任务 5、Mode指示webpack使用的模式。 6、devtool用于编译后的代码调试。 7、devserver启动一个开发环境下的Web服务器用于代码调试。 以下是一个webpack.config.js的配置
const pathrequire(path)
const { VueLoaderPlugin } require(vue-loader)
const HtmlWebpackPluginrequire(html-webpack-plugin)
const { CleanWebpackPlugin }require(clean-webpack-plugin)
const webpackrequire(webpack)module.exports{mode:development,entry:./src/main.js,devtool:cheap-module-eval-source-map,devServer:{port:3019,open:true,hot:true},output:{filename:bundle.js,path:path.resolve(__dirname,dist)},module:{rules:[{test:/\.vue$/,loader:vue-loader},{test:/\.(jpg|jpeg|png|svg)$/,loader:file-loader,options:{name:[name].[ext],// limit:2048}},{test:/\.css$/,use:[style-loader,css-loader]},{test:/\.styl(us)?$/,use:[style-loader,css-loader,postcss-loader,stylus-loader]}]},plugins:[new VueLoaderPlugin(),new HtmlWebpackPlugin({template:index.html}),new CleanWebpackPlugin(),new webpack.HotModuleReplacementPlugin()],resolve:{alias:{vue:vue/dist/vue.esm-bundler.js}}
}
三、常用的Loader和插件 Webpack常用的loader ⑴、Babel-loader将 ES6 转化为 ES5 ⑵、Css-loader加载和打包 CSS 文件 ⑶、File-loader打包文件如图片字体等 ⑷、Raw-loader加载原始文本文件例如 SQL 文件 ⑸、Url-loader加载和转换小图片并在超过限制时将其打包为文件 ⑹、Postcss-loader处理 CSS 的兼容性问题 ⑺、Less-loader加载和打包 Less 文件 ⑻、Sass-loader加载和打包 Sass 文件 ⑼、Stylus-loader加载和打包 Stylus 文件 ⑽、Json-loader加载 JSON 文件. Webpack 常用的插件 ⑴、CleanWebpackPlugin用于清除目录中无用的文件。 ⑵、HtmlWebpackPlugin用于生成 HTML 文件。 ⑶、MiniCssExtractPlugin用于抽取 CSS 文件。 ⑷、UglifyjsWebpackPlugin用于压缩 JS 代码。 ⑸、OptimizeCssAssetsWebpackPlugin用于压缩 CSS 代码。 ⑹、CopyWebpackPlugin用于复制文件或文件夹。 ⑺、BundleAnalyzerPlugin用于分析打包后的文件体积。 ⑻、CompressionWebpackPlugin用于压缩输出的文件。
四、在webpack中实现自己的加载器 ⑴、新建一个 JavaScript 文件编写加载器的代码。
module.exports function(source) {//处理return 处理结果;
} ⑵、在 webpack 配置文件中配置自己的加载器并使用 module.rules 属性来进行配置。 rules: [{test: /\.文件的后缀$/,use: [path.resolve(位置, 模块名称.js)]}
五、在webpack中实现自己的插件 ⑴、创建一个 JavaScript 对象并实现 apply 方法。
class 插件名称 {apply(compiler) { //处理}
}module.exports 插件名称; ⑵、在 webpack 配置文件中引用这个插件并使用它。 plugins: [new 插件名称()] Webpack说简单也的确简单就那么点内容。 说复杂也是很复杂因为要清楚各种Loader以及插件的细节并恰当地使用这也不是一件容易的事情上面我没有用到optimization具体开发项目的时候肯定要使用。 但关键点并不在这里关键还是在于项目的具体构建Webpack只不过是让你的项目开发更高效以及项目产品的输出更加高质量而已。
