module.exports = { entry: "./src/main.js", output: { filename: "build/build.js" }, module: { loaders: [ //.css 文件使用 style-loader 和 css-loader 来处理 { test: /\.css$/, loader: "style!css" }, //.js 文件使用 jsx-loader 来编译处理 { test: /\…

接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install webpack@3.5.6 --save-dev ),然后创建基本的项目文件夹结构,好了,我们的又一个基本项目结构就搭建好了. 第一.开始通过webpack.config.js文件配置我们的webpack项目 首先在项目文件夹demo2下面,新建一个webpack.config.js文件,这个web…

[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上) [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下) [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上) [js高手之路]深入浅出webpack教程系…

webpack配置之webpack.config.js文件配置 webpack.config.js webpack resolve  1.总是手动的输入webpack的输入输出文件路径,是一件非常繁琐的事情.我们尝试用文件的形式将输入输出文件夹配置好.新建一个js文件,并命名为webpack.config.js[目前只能命名为这个,不然程序不识别] webpack.config.js 2.在webpack.config.js文件内输入以下代码 module.exports = { entry:…

1. 安装:主要是用来压缩css文件 cnpm install --save-dev optimize-css-assets-webpack-plugin cssnano 2. webpack.config.js配置 const optimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin'); //压缩css插件配置 new optimizeCssAssetsWebpackPlugin() //暂时不起作用…

1. 安装: //loader加载器加载css和sass模块 cnpm install style-loader css-loader node-sass sass-loader --save-dev //loader加载器加载css和less模块 cnpm install style-loader css-loader less less-loader --save-dev //样式抽离文件 如果是webpack4.X 需要加@next //现在webpack4.x支持mini-css-ext…

1. 安装:打包编译时,可以删除一些html中没有使用的选择器,如果html页面中没有class=a class="b"的元素,.a{}.b{}样式不会加载 cnpm install --save-dev purifycss-webpack purify-css glob 2. webpack.config.js中使用 const purifycssWebpack = require('purifycss-webpack');const glob = require('glob');…

一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm install less-loader --save-dev 2.在module中配置 { test: /\.less$/, use: [{ loader: "style-loader" },{ loader: "css-loader" },{ loader: "le…

## Webpack的配置和使用 ### 安装 1. 全局安装 ``` npm install webpack -g ``` 2. 本地安装 ``` npm install webpack -D ``` ### 使用 #### 直接通过命令参数来执行 1. 如果是全局安装的 ``` webpack 入口文件 出口文件 ``` 2. 如果是本地安装的 2.1 先在package.json的script标签中添加一条命令(就和全局的命令一模一样) 2.2 通过npm run 命令名 来执行命令 ##…

1. 安装:主要是用来清除重复文件,生成最新的的插件 就是说在编译文件的时候,先把 build或dist (就是放生产环境用的文件) 目录里的文件先清除干净,再生成新的带有hash值的文件 cnpm install clean-webpack-plugin --save-dev 2. webpack.config.js中使用 const cleanWebpackPlugin = require('clean-webpack-plugin'); //插件配置 plugins: [ new clea…