webpack2.0搭建前端项目的教程详解

网络编程 2024/11/16 佚名

3 1 2

一、什么是webpack:

webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

注意： 目前最新为webpack2.0版本，与1.0有一些出入

二、初始化项目

npm init

npm install webpack --save-dev

三、安装loader，stylus以及postCss

npm install style-loader css-loader stylus-loader stylus --save-dev
npm install --save-dev postcss-loader autoprefixer

四、目录结构大致如下

五、添加webpack.config.js 配置如下：

// 该配置基于webpack2.0 详情查看 https://webpack.js.org/guides/migrating/
const path = require('path'); // 导入路径包

module.exports = {
 entry: './src/main.js', //入口文件
 output: {
 path: path.resolve(__dirname, 'build'), // 指定打包之后的文件夹
　　　　 // publicPath: '/assets/', // 指定资源文件引用的目录，也就是说用/assests/这个路径指代path，开启这个配置的话，index.html中应该要引用的路径全部改为'/assets/...'
 // filename: 'bundle.js' // 指定打包为一个文件 bundle.js
 filename: '[name].js' // 可以打包为多个文件
 },
 // 使用loader模块
 module: {
 /* 在webpack2.0版本已经将 module.loaders 改为 module.rules 为了兼容性考虑以前的声明方法任然可用，
　　　　　　同时链式loader(用!连接)只适用于module.loader，
　　　　　　同时-loader不可省略 */
 rules: [{
  test: /\.css$/,
  use: [
  'style-loader', {
   loader: 'css-loader',
   options: {
   // modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules
   }
  }, {
   loader: 'postcss-loader',
   // 在这里进行配置，也可以在postcss.config.js中进行配置，详情参考https://github.com/postcss/postcss-loader
   options: {
   plugins: function() {
    return [
    require('autoprefixer')
    ];
   }
   }
  }
  ]
 }, {
  test: /\.styl(us)"postcss-loader",
   options: {
   plugins: function() {
    return [
    require('autoprefixer')
    ];
   }
   }
  }, 'stylus-loader'
  ]
 }]
 }
}

在index.html中引入'/build/main.js'。main.js 代码如下

require('./common/css/style.css'); require('./common/css/stylus.styl');

六、通过webpack-dev-server实现页面的自动刷新。

首先安装webpack-dev-server

npm install --save-dev webpack-dev-server

然后修改package.json配置文件中：

"scripts": {
 "start": "webpack-dev-server",
 "build": "webpack"
 }

使用npm start 启动服务。npm的 start是一个特殊的脚本名称，它的特殊性表现在，在命令行中使用npm start就可以执行相关命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name} ，所以打包命令修改为npm run build 。

这里如果使用webpack-dev-server 命令来启动就必须全局安装 devServer:

npm install webpack-dev-server -g

在webpack的配置文件中可以对devServer进行配置

// 配置devServer各种参数
 devServer: {
 contentBase: "./", // 本地服务器所加载的页面所在的目录
 historyApiFallback: true, // 不跳转
 inline: true // 实时刷新
 }

此时可以监听入口文件的改变，实时刷新页面，然而非入口文件的改变则不会被监听到，需要手动进行刷新。并且目标文件不包括index.html。这里使用html-webpack-plugin插件。

 npm install html-webpack-plugin --save-dev

修改webpack配置文件，添加以下配置：

...
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 ....,
 plugins: [
 new HtmlWebpackPlugin({
  template: './index.html' // 模版文件
 })
 ]
}

这里记录一下遇到的坑：首先，devServer其实读取的是打包之后的文件，但是这些文件是存储在内存当中（并不会显示在build下）。然后由于使用HtmlWebpackPlugin这个插件，它可以自动帮你将打包的js插入模版html文件中，因此我们要将原文件（就是作为模版的index.html文件）中插入的main.js这行代码去掉。然后如果开启了publicPath这个选项，HtmlWebpackPlugin会插入publicPth选项的路径（'/assets/main.js'），devServer的index.html此时是无法读取到该目录下的文件。但是奇怪的是devServer此时直接没有插入该scripts。。不知道为啥。。但是为了部署的问题，cdn啥的，对开发环境和生产环境应该开启不同的publicPath，也就是说开发和生产应该使用两个不同的配置文件（包括sourcemap，devserver都不应该出现在生产的配置中）。

七、sourcemap 让开发更易于调试

module.exports = {
 devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项
 ....
 }
}

八、使用ES6语法

webpack2.0增加了对ES6模块的支持，无需额外的配置，并且可以与 AMD 和 CommonJS混用。webpack 2可以分析理解所有的ES6代码并且只在检测到是ES6模块时才使用tree-shaking。然而，只有import导入和export导出的模块才会被编译为ES5，如果希望所有的打包文件都编译为ES5，你需要使用一个转译器来处理剩下来的文件。这里我使用babel。首先安装babel：

npm install --save-dev babel-core babel-loader babel-preset-es2015

在根目录下添加.babelrc文件，并添加配置

如果bable的配置仍然为：

{
 presets: ['es2015']
}

那么无用的代码也会被打包（Babel会将ES 6模块通过commonJs模块转换输出，然后webpack 2就不能进行tree-shaking分析了）。这块儿大致原理是这样的。。。

因此我们将配置文件改为：

{
 "presets": [
  ["es2015", {"modules": false}]
 ]
}

并且在webpack的配置文件中加入如下loader（此处一定不能用use，不知道为啥）

{
 test: /\.js$/,
 loader: 'babel-loader', //此处不能用use，不知道为啥
 exclude: /node_modules/ //需要排除的目录
}

九、热加载模块（HMR）

webpack配置文件中，devServer的“inline”选项会为入口页面添加“热加载”功能，“hot”选项则开启“热替换（Hot Module Reloading）”，即尝试重新加载组件改变的部分（而不是重新加载整个页面）。如果两个参数都传入，当资源改变时，webpack-dev-server将会先尝试HRM（即热替换），如果失败则重新加载整个入口页面。要使用HRM，首先需要在webpack配置文件中配置plugin：

 plugins: [
  ...
  new webpack.HotModuleReplacementPlugin() // 热加载插件
 ]

到这一步，实际上改变css可以实现hrm，然而js只会刷新整个页面，index.html直接不刷新了。。。不知道为啥。react可以通过react-transform-hrm来搞定。非react框架现在考虑用webpack-dev-middleware 来尝试一下

十、生产环境

通过以上步骤基本的开发环境就搭建完毕了，那么实际上在生产环境里可能会有其他的要求，例如分离js与css（目前css是打包到js中去的），例如压缩代码等。

首先创建一个webpack.production.config.js,然后在package.json中配置修改为：

"scripts": {
 "start": "webpack-dev-server",
 "build": "set NODE_ENV=production&&webpack --config ./webpack.production.config.js"
 }

当运行 npm run build 的时候，会设置环境变量"NODE_ENV"为"production"。

var prod = process.env.NODE_ENV === 'production' "_blank" href="http://xiazai.jb51.net/201704/yuanma/webpack-demo-project-master(jb51.net).rar">点击这里
总结
以上就是这篇文章的全部内容了，至此大致的开发以及生产环境已经搭建完毕。希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持

webpack2.0搭建,webpack构建前端项目,前端webpack

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“webpack2.0搭建前端项目的教程详解”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

2024年11月16日

webpack2.0搭建前端项目的教程详解

JavaScript使用原型和原型链实现对象继承的方法详解

详解使用fetch发送post请求时的参数处理

评论“webpack2.0搭建前端项目的教程详解”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

webpack2.0搭建前端项目的教程详解

JavaScript使用原型和原型链实现对象继承的方法详解

详解使用fetch发送post请求时的参数处理

评论“webpack2.0搭建前端项目的教程详解”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存